<template>
    <div>
        <van-nav-bar title="首页" left-text="" left-arrow @click-left="onClickLeft" />
    </div>

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <div class="search-div">
                <van-field
                v-model="CoreForm.coreGetCount"
                name="目的地"
                left-icon="search"
                placeholder="搜索目的地/充电站"
                :rules="[{ required: true, message: '' }]"/>
            </div>
        </van-cell-group>
    </van-form>
    
    <van-tabs v-model:active="active" @change="onTabChange">
        <van-tab title="距离最近"></van-tab>
        <van-tab title="价格最低"></van-tab>
        <van-tab title="评价最好"></van-tab>
        <van-tab title="人气最高"></van-tab>
    </van-tabs>
    <div class="custom-line"></div>
    <div class="button-div">
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue }" @click="makeBlue">免费停车</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue1 }" @click="makeBlue1">大型商场</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue2 }" @click="makeBlue2">休息室</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue3 }" @click="makeBlue3">卫生间</van-button>
        </div>
        <div style="margin-right: 5px;">
        <van-button type="default" size="small" :class="{ 'is-blue': isBlue4 }" @click="makeBlue4">洗车场</van-button>
        </div>
    </div>
    <div style="background-color: whitesmoke; padding: 16px;">
        <div v-for="station in stations" :key="station.id" class="station-card" @click="StationDetailPage(station)">
            <div class="station-info">
                <h4>{{ station.stationName }}</h4>
                <div class="station-hours">{{ station.openingHours }} 小时 | {{ station.dedicatedName }}专用</div>
            </div>
            <div class="station-pricing">
                <div class="price">{{ station.price }}元/度</div>
                <div class="original-price">{{ station.originalPrice }}元/度</div>
            </div>
            <div class="station-availability">
                <div :class="{'full': station.gunCountEnd === 0, 'available': station.gunCountEnd > 0}">
                    空: {{ station.gunCountEnd }}
                </div>
                <div>共：{{ station.gunCount }}</div>
            </div>
            <div class="station-footer">
                <img class="icon" src="../../images/map.png" alt="Map Icon">
                <div class="address">{{ station.address }}</div>
                <div class="distance">{{ station.distance }}Km</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { GetCoreAll } from '@/api/core';
import router from '@/router';
import { ref } from 'vue';
import CryptoJS from 'crypto-js';

const onClickLeft = () => history.back();

const active = ref(0);
// const align = ref('center');
const stations = ref([]);

// 经纬度
const longitude = ref( 116.461841);
const latitude = ref( 39.909104);
//查询参数
const CoreForm=ref({
    longitude:longitude,
    latitude:latitude,
    coreGetCount:'',
    handoff:0,
    parkFee:'',
    lounge:'',
    toilet:'',
    shoppingMall:'',
    washCar:''
})
function getCoreAll(data){
    CoreForm.value.handoff=data;
    console.log(CoreForm.value);
    
    GetCoreAll(CoreForm.value).then(res => {
        console.log(res);
        
        stations.value = res.data.data;
    })
}
getCoreAll(0);

function onSubmit(){

    console.info('提交');
    console.log(CoreForm.value.coreGetCount);
    getCoreAll(0)

}

function StationDetailPage(station) {
    console.log(station);
    console.info("站点详情跳转");

    // 将 station 对象转换为 JSON 字符串并进行 AES 加密
    const secretKey = 'mySecretKey123'; // 替换为你的密钥
    const encryptedStation = CryptoJS.AES.encrypt(JSON.stringify(station), secretKey).toString();

    // 使用对象传递路径和加密后的参数
    router.push({
        path: '/station/detail',
        query: { station: encryptedStation }
    });
}

const isBlue = ref(false);
const isBlue1 = ref(false);
const isBlue2 = ref(false);
const isBlue3 = ref(false);
const isBlue4 = ref(false);

function makeBlue() { 
    isBlue.value = !isBlue.value;
    console.log('免费停车 button clicked');
    CoreForm.value.parkFee = CoreForm.value.parkFee === 1 ? '' : 1;
    console.log(CoreForm.value.parkFee);
   
    getCoreAll(0)
}
function makeBlue1() { 
    isBlue1.value = !isBlue1.value;
    console.log('大型商场 button clicked');
    console.log(CoreForm.value.shoppingMall);    
    CoreForm.value.shoppingMall = CoreForm.value.shoppingMall === 1 ? '' : 1;
    getCoreAll(0)

}
function makeBlue2() { 
    isBlue2.value = !isBlue2.value;
    console.log('休息室 button clicked');
    console.log(CoreForm.value.lounge);
    CoreForm.value.lounge = CoreForm.value.lounge === 1 ? '' : 1;
    getCoreAll(0)

}
function makeBlue3() { 
    isBlue3.value = !isBlue3.value;
    console.log('卫生间 button clicked');
    console.log(CoreForm.value.toilet);
    CoreForm.value.toilet = CoreForm.value.toilet === 1 ? '' : 1;
    getCoreAll(0)

}
function makeBlue4() { 
    isBlue4.value = !isBlue4.value;
    console.log('洗车场 button clicked');
    console.log(CoreForm.value.washCar);
    CoreForm.value.washCar = CoreForm.value.washCar === 1 ? '' : 1;
    getCoreAll(0)

}

function onTabChange(name) {
    console.log('当前选中的标签索引:', name);
    
    getCoreAll(name);

}
</script>

<style>
.search-div{
    display: flex;
}
.button-div{
    margin-top: 10px;
    margin-left: 16px;
    display: flex;
}
.is-blue {
  background-color: lightskyblue;
}
.custom-line {
    margin-top: 3px;
    border-bottom: 0.5px solid lightgray;
    width: 100%;
}
.strike-line {
  font-weight: bold;
  margin-left: 5px;
}
.station-card {
    background-color: white;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.station-info {
    display: flex;
    justify-content: space-between;
}

.station-pricing {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.station-availability {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.full {
    color: red;
}

.available {
    color: green;
}

.station-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.icon {
    height: 20px;
    margin-right: 5px;
}

.address {
    flex-grow: 1;
    font-size: 12px;
}

.distance {
    text-align: right;
}
</style>